<template>
  <div class="model">
    <div class="myVideo">
      <video
        id="videoPlayer"
        ref="myvideo"
        class="video-js vjs-default-skin"
        controls
        playsinline
        autoplay="autoplay"
        width="500px"
      >
        <source
          :src="play_url"
          type="application/x-mpegURL"
        >
      </video>
      <div
        class="close"
        @click="onClose"
      ><i
          class="el-icon-circle-close"
          style="color: #fff"
        ></i></div>
      <div class="nextVideo rowFlex spaceBetween columnCenter"> <el-button
          class="btn"
          @click="nextVideo(1)"
        >上一集</el-button>
        <p class="text">{{ `${playInfo.title} - 第${playInfo.chapter_num}集` }}</p> <el-button
          class="btn"
          @click="nextVideo(2)"
        >下一集</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import Axios from 'axios'
import { chapterDuration } from '@/api/common'
import { POST_sys_playlet_Play } from '@/api/appContent/theater'
import SvgIcon from '@/components/SvgIcon/index.vue'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
export default {
  components: {
    SvgIcon
  },
  props: {
    playInfo: {
      type: Object,
      default: {}
    },
    tableData: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      play_url: '',
      dp: null,
      options: {
        autoplay: false, // 设置自动播放
        muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音（Chrome66及以上版本，禁止音视频的自动播放）
        preload: 'auto', // 预加载
        controls: true // 显示播放的控件,
      },
      auto_index: 0,
      auto_chapter_id: '',
      chapterList: [1706, 1707, 1708, 1709, 1710, 1711, 1712, 1714, 1715, 1716, 1717, 1718, 1719, 1720, 1721, 1722, 1723, 1724, 1725, 1726, 1727, 1728, 1729, 1730, 1731, 1732, 1733, 1734, 1735, 1736, 1737, 1738, 1739, 1740, 1741, 1742, 1743, 1744, 1745, 1746, 1747, 1748, 1749, 1750, 1751, 1752, 1753, 1754, 1755, 1756, 1757, 1758, 1759, 1760, 1761, 1762, 1763, 1764, 1765, 1766, 1767, 1768, 1769, 1770, 1771, 1772, 1773, 1774, 1775, 1777, 1781, 1782, 1783, 1784, 1785, 2230, 2232, 2238, 2260, 2918, 2919, 2920, 2921, 2922, 2923, 2924, 2925, 2926, 2927, 2928, 2929, 2930, 2931, 2932, 2933, 2934, 2935, 2936, 2937, 2938, 2939, 2940, 2941, 2942, 2943, 2944, 2945, 2946, 2947, 2948, 2949, 2950, 2951, 2952, 2953, 2954, 2955, 2956, 2957, 3100, 3101, 3102, 3105, 3106, 3107, 3109, 3110, 3111, 3112, 3113, 3114, 3115, 3116, 3117, 3118, 3119, 3228, 3229, 3230, 3231, 3232, 3233, 3234, 3235, 3236, 3237, 3238, 3239, 3240, 3241, 3242, 3243, 3244, 3245, 3246, 3374, 3376, 3377, 3378, 3379, 3384, 3391, 3942, 4523, 4524, 4525, 4526, 4529, 5156, 5157, 5158, 5159, 5160, 5161, 5162, 5163, 5164, 5165, 5166, 5167, 5775, 6170, 6171, 6172, 6174, 6175, 6176, 6177, 6178, 6179, 6180, 6181, 6182, 6183, 6184, 6185, 6186, 6187, 6188, 6189, 6190, 6191, 6192, 6193, 6194, 6221, 6222, 6223, 6224, 6225, 6226, 6227, 6228, 7332, 7333, 7334, 7335, 7336, 7337, 7338, 7339, 7340, 7341, 7342, 7343, 7344, 7345, 7346, 7347, 7348, 7349, 7350, 7351, 7400, 7401, 7402, 7403, 7404, 7405, 7406, 7407, 7408, 7409, 7410, 7411, 7412, 7413, 7414, 7415, 7416, 7417, 7418, 7419, 7420, 7817]
    }
  },
  mounted() {
    this.auto_chapter_id = 1706
    this.getPlayUrl()
    // const video = document.getElementById('videoPlayer')
    // video.addEventListener('play', function () {
    //   nsole.log(video)
    // })
    const video = this.$refs.myvideo
    video.addEventListener('loadedmetadata', (e) => {
      console.log(Math.floor(video.duration))
      if (Math.floor(video.duration)) {
        chapterDuration({ chapter_id: this.auto_chapter_id, duration: Math.floor(video.duration) }).then((res) => {
          if (res.status_code == 1) {
            this.auto_index = this.auto_index + 1
            this.auto_chapter_id = this.chapterList[this.auto_index]
            this.getPlayUrl()
          }
        })
      }
    })
  },
  methods: {
    async getPlayUrl() {
      const res = await POST_sys_playlet_Play({
        // chapter_id: this.playInfo.id || ''
        chapter_id: this.auto_chapter_id
      })
      if (res.status_code === 1) {
        console.log(res.data.play_url)
        this.play_url = res.data.play_url
        this.$nextTick(() => {
          this.loadVideo()
        })
      }
    },
    // type 1 上一集 2 下一集
    nextVideo(type) {
      const index = this.tableData.findIndex((item) => item.id === this.playInfo.id)
      console.log(index)
      if (this.tableData.length === 1) {
        type === 1 ? this.$message.warning('没有上一集了') : this.$message.warning('没有下一集了')
        return
      }
      if (index === 0 && type === 1) {
        this.$message.warning('没有上一集了')
        return
      }
      if (index === this.tableData.length - 1 && type === 2) {
        this.$message.warning('没有下一集了')
        return
      }
      this.$emit('update:playInfo', this.tableData[type === 1 ? index - 1 : index + 1])
      console.log(this.playInfo, '123132')
      setTimeout(() => {
        this.getPlayUrl()
        this.$forceUpdate()
      }, 200)
    },
    onClose() {
      this.dp.dispose()
      this.$emit('close')
    },
    loadVideo() {
      this.dp = videojs('videoPlayer', this.options)
      this.dp.src(this.play_url)
      // console.log(this.dp.trackCurrentTime_())

      // 也可以使用以下方式给vedio设置 src
      // this.db.src([
      //   {
      //     src: "https://e-sign.dms.t.cn-np.com/files/m3u8_file/c4b94118-3c8d-4410-9987-985c2b44c278/c4b94118-3c8d-4410-9987-985c2b44c278.m3u8", // 地址
      //     type: "application/x-mpegURL", // 告诉videojs,这是一个hls流
      //   },
      // ]);
    },
    // 销毁
    beforeDestroy() {
      if (this.dp) {
        this.dp.dispose() // dispose()会直接删除Dom元素
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.model {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  .myVideo {
    width: 450px;
    height: 90%;
    max-height: 860px;
    background: #181a1f;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .nextVideo {
    height: 60px;
    padding: 0 20px;
    .text {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }
    .btn {
      background: #34373d;
      border-radius: 4px;
      color: #ffffff;
      border: none;
    }
  }
  #videoPlayer {
    width: 450px;
    height: calc(100% - 60px);
    max-height: 800px;
  }
  .close {
    position: absolute;
    right: -40px;
    top: 0px;
    font-size: 26px;
    cursor: pointer;
  }
}
</style>